<template>
    <div class="armor">
        <div class="loading" v-if="pageStat">
            <Loading></Loading>
        </div>
        <ul class="weaponList" v-if="!pageStat">
            <div class="collapse">
                <li v-for="item in ArmorList" :key="item.id">
                    <div class="weaponItem">
                        <div class="right" @click="selectWeaponInfo(item.linkId)" ref="selectWeaponInfo">
                            <img :src="item.item__icon" alt="盔甲图片" class="weaponImg">
                            <div class="weaponInfo">
                                <span class="weaponName">{{item.item__name}}</span>
                                <div class="weaponType">
                                    <span>{{item.grade}} </span>
                                    <span>{{item.occupation}} </span>
                                    <span>{{item.position}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="collapase_click" @click="selectCollapse(item.id)">

                        </div>
                    </div>
                    <div class="collapse_item" v-if="activeNames===item.id">
                        <table class="weapon_table">
                            <thead>
                                <tr>
                                    <th>Power</th>
                                    <th>Mobility</th>
                                    <th>Resilience</th>
                                    <th>Recovery</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td v-for="stat in item.stat" :key="stat">{{stat}}</td>
                                </tr>
                            </tbody>
                        </table>

                    </div>
                </li>
            </div>
            <van-pagination v-model="currentPage" :total-items="18" :items-per-page="1" @change="changePage"
                class="pagination" />
        </ul>

    </div>
</template>

<script>
    import axios from 'axios'
    import Loading from '@/components/loading/Loading.vue'

    export default {
        data() {
            return {
                pageStat: true,
                currentPage: 1,
                activeNames: -1,
                ArmorList: []
            }
        },
        components: {
            Loading
        },
        created() {
            this.currentPage = this.$store.state.armorCurrentPage
            this.getArmorList(this.currentPage)
        },
        updated() {},
        methods: {
            getArmorList(currentPage) {
                axios.get("api/getArmor", {
                        params: {
                            page: currentPage
                        }
                    })
                    .then(res => {
                        this.ArmorList = res.data
                        this.$nextTick(() => {
                            this.pageStat = false
                        })

                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            selectCollapse(id) {
                if (this.activeNames === id) {
                    this.activeNames = -1
                } else {
                    this.activeNames = id
                }

            },
            changePage() {
                this.pageStat = true
                window.scrollTo(0, 0)
                axios.get("api/getArmor", {
                        params: {
                            page: this.currentPage
                        }
                    })
                    .then(res => {
                        this.ArmorList = res.data
                        this.$nextTick(() => {
                            this.pageStat = false
                        })
                    })
                    .catch(err => {
                        console.error(err);
                    })
            },
            selectWeaponInfo(weaponId) {
                this.$store.commit('changeArmorCurrentPage', this.currentPage)
                var id = weaponId
                console.log(id)
                this.$router.push({
                    name: "ArmorInfo",
                    params: {
                        id
                    },
                });
            }
        }

    }
</script>

<style scoped>
    .right {
        display: flex;
        flex: 1;
    }

    .armor {
        height: 100%;
    }


    .loading {
        height: 718px;
        overflow: hidden;
    }

    .weaponList {
        background: #1F1F1F;

    }

    .weaponItem {
        display: flex;
        /* background: #1F1F1F; */
        border-bottom: 1px solid #ccc;

    }

    .weaponImg {
        width: 60px;
        height: 60px;
        border-radius: 10px;
        margin: 10px;
    }

    .weaponInfo {
        color: white;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
    }

    .weaponName {
        font-size: 20px;
        font-weight: bold;
    }

    .weaponType {
        display: flex;
        font-size: 12px;
        margin-top: 5px;
    }

    .attribute {
        display: flex;
        align-items: center;
    }

    .attribute>img {
        width: 13px;
        height: 13px;
    }

    .weaponType>:not(:last-child):after {
        content: " | ";
        color: var(--text-color-muted);
        opacity: .5;
    }

    .collapse_item {
        width: 100%;
        text-align: center;
        color: white;
        font-size: 14px;
        border-bottom: 1px solid #ccc;
    }

    .weapon_table {
        background: rgb(49, 48, 48);
        width: 100%;
        padding: 5px 7px;

    }


    .collapase_click {
        width: 20px;
        height: 20px;
        margin: 25px 20px;
        background: #ccc;

    }
</style>